<%@page import="com.dfhc.ISystemConstant"%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="<%=request.getContextPath()%>/css/GX_css/info-reg.css" />
<link rel="stylesheet" href="<%=request.getContextPath()%>/css/GX_css/base.css" />
<link  type="text/css" rel="stylesheet" href="<%=request.getContextPath()%>/css/GX_css/jquery-ui.css">
<link rel="stylesheet" href="<%=request.getContextPath()%>/css/GX_css/info-mgt.css" />
<link rel="stylesheet" href="<%=request.getContextPath()%>/css/GX_css/WdatePicker.css" />
<link href="<%=request.getContextPath()%>/css/activiti/jquery.qtip.css?v=1.1.2" type="text/css" rel="stylesheet" />
<title>办公自动化系统</title>
<style type="text/css">
    .richeng_dialog{ width:510px; height:550px; background:#FFFFFF; position: fixed; top:20%; border-radius:4px;  border:1px solid #C5C5C5;}
    .richeng_dialog_title{ width:98%; height:40px; background:#E9E9E9; padding-left:10px;  border-radius:4px; margin-bottom:5px; line-height: 40px;}
    .richeng_dialog_title div:nth-child(1){width:50%; height:100%; float: left;}
    .richeng_dialog_title div:nth-child(2){width:48%; height:100%; float: right; text-align: right; margin-right: 2%;}
    .richeng_dialog ul{display: block; float: left; width:100%; height:auto; height:40px;}
    .richeng_dialog ul:hover li{background:#E5E5E5;}
    .richeng_dialog ul li{float: left;   height:30px; line-height: 30px; font-size: 13px; color: #666666;}
    .richeng_dialog ul li:nth-child(1){width:10%;}
    .richeng_dialog ul li:nth-child(2){width:20%;}
    .richeng_dialog ul li:nth-child(3){width:70%;}
</style>
</head>

<body>
<!-- <div class="title"><h2>历史工作流程</h2></div> -->
<div class="query">
	<form id="form" name="form" action="<%=request.getContextPath()%>/workprocess/workShow.action?titleType=listHistory" method="post"> 
	<input name="startSign" id="startSign" type="hidden"/>
    <div class="query-conditions ue-clear">
        <div class="conditions staff ue-clear">
            <label>流程名称：</label>
            <input type="text" id="procName" name="procName" placeholder="可以直接输入" value="${procName}"/>
        </div>
        <div class="conditions operate-time ue-clear">
            <label>发起时间：</label>
            <div class="select-wrap">
                <div class="select-title ue-clear" id="startTimeSign"><span>大于或等于</span><i class="icon"></i></div>
                <ul class="select-list">
                    <li>小于</li>
                    <li>大于</li>
                    <li>小于或等于</li>
                </ul>
            </div>
            <div class="input-box ue-clear">
                <input name="workdays" id="workdays"  type="text" />
                <span>工作日</span>
            </div>
        </div>
        <%-- 
        <div class="conditions time ue-clear">
            <label>流程周期：</label>
            <div class="time-select">
                <input type="text" onfocus="WdatePicker({dateFmt:'yyyy-MM-dd'})" placeholder="开始时间" />
                <i class="icon"></i>
            </div>
            <span class="line">-</span>
            <div class="time-select">
                <input type="text" onfocus="WdatePicker({dateFmt:'yyyy-MM-dd'})" placeholder="截止时间" />
                <i class="icon"></i>
            </div>
        </div>
        --%>
        <!-- <div class="conditions staff ue-clear">
            <label>人&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;员：</label>
            <input type="text" id="pname" name="startPerson" placeholder="可以直接输入或选择" />
            <a href="javascript:;" onclick="javascript:chooseStartPerson();" class="staff-select">选择</a>
        </div> -->
        <input name="pid" id="pid" type="hidden" />
    </div>
    <div class="query-btn ue-clear">
        <a href="javascript:;" onclick="javascript:query();" class="confirm">查询</a>
        <a href="javascript:;" onclick="javascript:empty();" class="clear">清空条件</a> 
    </div>
   </form> 
</div>
<div class="table-operate ue-clear">

    <a href="javascript:;" class="edit">过滤</a>
</div>
<div class="table-box">
    <table>
        <thead>
        	<tr>
	            <th class="num">序号</th>
	            <th class="name">姓名</th>
	            <th class="process">流程</th>
	            <th class="node">节点</th>
	            <th class="time">操作状态<span>（及时间）</span></th>
	            <th class="operate">操作</th>
            </tr>
        </thead>
        <tbody>
        	<c:forEach items="${taskVos }" var="taskVo" varStatus="rowCounter" begin="0" step="1">
	        	<tr>
	            	<td class="num">${rowCounter.index+1 }</td>
	                <td class="name">${taskVo.userName }</td>
	                <td class="process">${taskVo.procTitle }</td>
	                <td class="node">${taskVo.taskName }</td>
	                <c:if test="${empty taskVo.endTime }">
	                	<td class="time">未完成</td>
	                </c:if>
	                <c:if test="${not empty taskVo.endTime }">
	                	<td class="time">已完成</td>
	                </c:if>
                	<td class="operate">
	                    <a href="javascript:;" onclick="javascript:look('${taskVo.procDefId }','${taskVo.procInstId }','${taskVo.taskId }','${taskVo.startUserName}','${taskVo.procDefName }','${taskVo.startTime }','${taskVo.endTime }','${taskVo.taskKey }');" class="img"><span class="confirm">查看</span></a>
	                </td>
            	</tr>
            </c:forEach>
        </tbody>
    </table>
</div>
<div class="pagination ue-clear"></div>
<div id="showDetail" style="display:none;">
<div id="processDetail" class="title"><h2>工作流程基本信息</h2></div>
<div class="main">
	<p class="short-input ue-clear newstyle">
    	<label>工作流名称：</label><span id="processName">uimaker</span>
    </p>
    <p class="short-input ue-clear newstyle">
    	<label>发起人：</label><span id="startName">UI制造者</span>
    </p>
    <p class="short-input ue-clear newstyle">
        <label>发起日期：</label><span id="startTime">2014-08-27 16:49:20</span>
    </p>
    <!-- <p class="long-input ue-clear newstyle">
    	<label>状态：</label><span id="processState">正常结束</span>
    </p> -->
    <div id="dynamicDiv">
    
    </div>
    <p class="short-input ue-clear newstyle" id="attaId">
    	<label>附件名称：</label><span id="fileNameList">China，wordl，PDF</span>
    </p>
    

</div>
<div class="btn1 ue-clear">
	<a href="javascript:;" class="confirm">展开/折叠</a>
    <!--<a href="javascript:;" class="clear">清空内容</a>-->
    <a href="#processImg" class="clear">流程状态</a>
</div>
<div id="processImg" class="main">
<!--     <p class="short-input ue-clear newstyle">
        <label>流程名：</label><span id="processNameT">差旅审批</span>
    </p>
    <p class="short-input ue-clear newstyle">
        <label>状态：</label><span id="processStateT">正常结束</span>
    </p>
 -->    <p class="short-input ue-clear newstyle "  id="shi_process" style="height: 500px;">
<%--         <a href="javascript:;" class="img"><img src="<%=request.getContextPath()%>/images/oa/liuchengtu01.png" /></a> --%>
		<iframe id="iframesrc" src="" width="100%" height="100%" style="padding:0;"></iframe>
    </p>

</div>
</div>

<div class="richeng_dialog" style="display:none;">
    <form action="##" name="userMessageForm">
    	<ul>
            <li>选择</li>
            <li>序号</li>
            <li>名称</li>
        </ul>
    	<c:forEach items="${userVos }" var="userVo" varStatus="rowCounter" begin="0" step="1">
        <ul>
            <li><input type="checkbox" id="checkUser" name="checkUser" value="${userVo.id }"></li>
            <li>${rowCounter.index+1 }</li>
            <li>${userVo.name }</li>
        </ul>
        </c:forEach>
    </form>
</div>

</body>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/activiti/jquery-1.8.3.js"></script>
<%-- <script type="text/javascript" src="<%=request.getContextPath()%>/js/GX_js/jquery-1.10.1.js"></script> --%>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/GX_js/jquery-ui.min.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/GX_js/common.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/GX_js/info-mgt.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/GX_js/WdatePicker.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/GX_js/jquery.pagination.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/rm-tools.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/activiti/workflow.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/activiti/jquery.qtip.pack.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/activiti/jquery.outerhtml.js"></script>
<script type="text/javascript">
	function look(procDefId, procInstId, taskId, userName, procDefName, startTime, endTime, taskKey){
		//alert("查看详情!");
		$('#processName').html(procDefName);
		$('#processNameT').html(procDefName);
		$('#startName').html(userName);
		if(!isStrEmpty(startTime)){
			startTime = startTime.substring(0,startTime.lastIndexOf('.'));
		}
		$('#startTime').html(startTime);
	/* 	if(isStrEmpty(endTime)){
			$('#processState').html('未完成');
			$('#processStateT').html('未完成');
		}else{
			$('#processState').html('已完成');
			$('#processStateT').html('正常结束');
		} */
		//查询当前节点有哪些动态表单
		$.ajax({
    	    type:'post',//可选get
    	    url:'<%=request.getContextPath()%>/workprocess/getCurrentNodeFormDataAndValue?date='+new Date(),
    	    data:{'procInstId':procInstId,'procDefId':procDefId,'taskId':taskId},
    	    dataType:'json',
    	    async:false , //false为同步
    	    success:function(data,status){
    		  if(data.status=="0"){
    		  		zfalert("警告",data.message,"");
    	
    	   	   }else{
    	   		   
    	   		    //拼接动态字段
					var dynamicData = data.list;
					var html = '';
					for(var i=0; i<dynamicData.length; i++){
						//if(!isStrEmpty(dynamicData[i].value)){
							html += '<p class="short-input ue-clear newstyle">';
							html += '<label>'+dynamicData[i].name+'：</label>'+dynamicData[i].value;
							html += '</p>';
						//}
					}
					$('#dynamicDiv').html(html);
					
					//评价文件列表
					var fileList = data.fileList;
					if(!isStrEmpty(fileList)){
						var html = '';
						for(var i=0;i<fileList.length; i++){
							var file = fileList[i];
							var path = file.<%=ISystemConstant.PROCESS_FILE_PATH%>;
							path = path.replace(/\\/g,'\\\\');
							var fileName = file.<%=ISystemConstant.PROCESS_FILE_NAME%>;
							if(html == ''){
								html += fileName;
							}else{
								html += ', '+fileName;				
							}
						}
						$('#fileNameList').html(html);
					}else{
						$('#attaId').hide();
					}
					
					
					$('#showDetail').show();
					window.location.href="#processDetail";
					<%-- var srcurl = "<%=request.getContextPath()%>/workflow/diagram-viewer/index.html?processDefinitionId="+procDefId+"&processInstanceId="+procInstId;
					$('#iframesrc').attr('src',srcurl); --%>
					var url = "<%=request.getContextPath()%>/workflow/diagram-viewer/index.html?processDefinitionId="+procDefId+"&processInstanceId="+procInstId;

				    var imageUrl= "<%=request.getContextPath()%>/workflow/resource/process-instance?pid=" +procInstId+ "&type=image&time="+new Date();
				    var traceUrl= "<%=request.getContextPath()%>/workflow/process/trace?pid=" +procInstId+"&time="+new Date();

					   
					var options={
							'pid':procInstId,
							'pdid':procDefId,
							'url':url,
							'imageUrl':imageUrl,
							'traceUrl':traceUrl
							
					
					};
					
					$("#shi_process").html('<div id="imgDialog"><iframe src="' + url + '" width="100%" height="' + document.documentElement.clientHeight * 0.70 + '" /></div>');
					
					graphTrace(options);
    	   	   }		
    	   },
    	   error:function(xhr,s1,s2){
    	    	var message = xhr.responseText;
    			eval("var json = "+message);
    			if($.trim(json.error).length==0){
    				zfalert("警告","数据异常,请刷新页面重试!","");
    				
    			}else{
    				zfalert("警告",json.error,"");
    			}
    	   }
    	});
	}
	
	function query(){
		var procName= $("#query").find("input[name=procName]").val();
		var startTimeSign = $('#startTimeSign span').text();
		if($("#workdays").val()!=""){
			$("#startSign").val(startTimeSign);
		}
<%-- 		window.location.href='<%=request.getContextPath()%>/workprocess/workShow.action?titleType=listHistory'; --%>
						form.submit(); 
	}
	
	//清空查询条件
	function empty(){
		$('#pname').val('');
		$('#pid').val('');
		$('#workdays').val('');
		$('#procDefName span').text('请选择');
		$('#startTimeSign span').text('大于或等于');
	}
	
	$('.richeng_dialog').dialog({
		autoOpen:false,
		title:'选择人员',
		modal:true,
		resizable:false,
		width:500,
		height:500,
		buttons:{	
			'提交':function(){
				var ckvId =''; 
	    		var ckvName = '';
				$('.richeng_dialog').find('input[id="checkUser"]:checked').each(function(){ 
	    			if(ckvId==''){
	    				ckvId = $(this).val();
	    				ckvName = $(this).parent().parent().children().last()[0].innerText;
	    			}else{
	    				ckvId += ','+$(this).val();
	    				ckvName += ','+$(this).parent().parent().children().last()[0].innerText;
	    			}
	    		});
				$('#pname').val(ckvName);
				$('#pid').val(ckvId);
				$('.richeng_dialog').dialog('close');
			},
		}
	});
	//显示人员选择层
	function chooseStartPerson(){
		$('.richeng_dialog').dialog('open');
	}
	
    $(".select-title").on("click",function(){
        $(".select-list").hide();
        $(this).siblings($(".select-list")).show();
        return false;
    })
    $(".select-list").on("click","li",function(){
        var txt = $(this).text();
        $(this).parent($(".select-list")).siblings($(".select-title")).find("span").text(txt);
    })

    $('.pagination').pagination(${recordNum},{
        callback: function(page){
        	
        	var procName= $("#query").find("input[name=procName]").val();
        	debugger
        	window.location.href="<%=request.getContextPath()%>/workprocess/workShow.action?titleType=listHistory&page="+(page+1)+"&date="+new Date();
        },
        display_msg: true,
        setPageNo: true,
    	current_page:${currentPage-1}
    });

    $("tbody").find("tr:odd").css("backgroundColor","#eff6fa");

    showRemind('input[type=text], textarea','placeholder');
</script>
</html>

